Jenseits von Enums: TypeScript Const Assertions vs. Union Types

In der Welt des statisch typisierten JavaScript mit TypeScript waren Enums lange Zeit die erste Wahl, um eine feste Menge benannter Konstanten darzustellen. Sie bieten eine klare und lesbare Möglichkeit, eine Sammlung verwandter Werte zu definieren. Da Projekte jedoch wachsen und sich weiterentwickeln, suchen Entwickler oft nach flexibleren und manchmal performanteren Alternativen. Zwei leistungsstarke Kandidaten, die häufig auftauchen, sind Const Assertions und Union Types. Dieser Beitrag befasst sich mit den Nuancen der Verwendung dieser Alternativen zu traditionellen Enums, bietet praktische Beispiele und zeigt Ihnen, wann Sie welche Option wählen sollten.

Grundlegendes zu traditionellen TypeScript-Enums

Bevor wir die Alternativen untersuchen, ist es wichtig, ein solides Verständnis davon zu haben, wie Standard-TypeScript-Enums funktionieren. Mit Enums können Sie eine Menge benannter numerischer oder Zeichenfolgenkonstanten definieren. Sie können numerisch (die Standardeinstellung) oder zeichenfolgenbasiert sein.

Numerische Enums

Standardmäßig werden Enum-Membern numerische Werte ab 0 zugewiesen.

            enum DirectionNumeric {
  Up,
  Down,
  Left,
  Right
}

let myDirection: DirectionNumeric = DirectionNumeric.Up;
console.log(myDirection); // Ausgabe: 0

            

              
                Copy
              
            
          

Sie können auch explizit numerische Werte zuweisen.

            enum StatusCode {
  Success = 200,
  NotFound = 404,
  InternalError = 500
}

let responseStatus: StatusCode = StatusCode.Success;
console.log(responseStatus); // Ausgabe: 200

            

              
                Copy
              
            
          

String-Enums

String-Enums werden oft wegen ihrer verbesserten Debugging-Erfahrung bevorzugt, da die Member-Namen im kompilierten JavaScript erhalten bleiben.

            enum ColorString {
  Red = "RED",
  Green = "GREEN",
  Blue = "BLUE"
}

let favoriteColor: ColorString = ColorString.Blue;
console.log(favoriteColor); // Ausgabe: "BLUE"

            

              
                Copy
              
            
          

Der Overhead von Enums

Obwohl Enums praktisch sind, verursachen sie einen geringen Overhead. Wenn TypeScript-Enums in JavaScript kompiliert werden, werden sie in Objekte umgewandelt, die oft Reverse Mappings haben (z. B. die numerischen Werte zurück auf den Enum-Namen abbilden). Dies kann nützlich sein, trägt aber auch zur Bundle-Größe bei und ist möglicherweise nicht immer erforderlich.

Betrachten Sie dieses einfache String-Enum:

            enum Status {
  Pending = "PENDING",
  Processing = "PROCESSING",
  Completed = "COMPLETED"
}

            

              
                Copy
              
            
          

In JavaScript könnte dies in etwa so aussehen:

            var Status;
(function (Status) {
    Status["Pending"] = "PENDING";
    Status["Processing"] = "PROCESSING";
    Status["Completed"] = "COMPLETED";
})(Status || (Status = {}));

            

              
                Copy
              
            
          

Für einfache, schreibgeschützte Mengen von Konstanten kann sich dieser generierte Code etwas übertrieben anfühlen.

Alternative 1: Const Assertions

Const Assertions sind ein leistungsstarkes TypeScript-Feature, mit dem Sie dem Compiler mitteilen können, den spezifischsten Typ für einen Wert zu inferieren. Wenn sie mit Arrays oder Objekten verwendet werden, die eine feste Menge von Werten darstellen sollen, können sie als eine schlanke Alternative zu Enums dienen.

Const Assertions mit Arrays

Sie können ein Array von String-Literalen erstellen und dann eine const Assertion verwenden, um seinen Typ unveränderlich und seine Elemente zu Literal-Typen zu machen.

            const statusArray = ["PENDING", "PROCESSING", "COMPLETED"] as const;

type StatusType = typeof statusArray[number];

let currentStatus: StatusType = "PROCESSING";
// currentStatus = "FAILED"; // Fehler: Type '"FAILED"' is not assignable to type 'StatusType'.

function processStatus(status: StatusType) {
  console.log(`Processing status: ${status}`);
}

processStatus("COMPLETED");

            

              
                Copy
              
            
          

Lassen Sie uns aufschlüsseln, was hier passiert:

• as const: Diese Assertion weist TypeScript an, das Array als schreibgeschützt zu behandeln und die spezifischsten Literal-Typen für seine Elemente zu inferieren. Anstelle von `string[]` wird der Typ also `readonly ["PENDING", "PROCESSING", "COMPLETED"]`.
• typeof statusArray[number]: Dies ist ein Mapped Type. Er iteriert über alle Indizes von statusArray und extrahiert deren Literal-Typen. Die number-Indexsignatur sagt im Wesentlichen: "Gib mir den Typ eines beliebigen Elements in diesem Array." Das Ergebnis ist ein Union Type: "PENDING" | "PROCESSING" | "COMPLETED".

Dieser Ansatz bietet Typsicherheit ähnlich wie String-Enums, generiert aber minimales JavaScript. Das statusArray selbst bleibt ein Array von Strings in JavaScript.

Const Assertions mit Objekten

Const Assertions sind noch leistungsstärker, wenn sie auf Objekte angewendet werden. Sie können ein Objekt definieren, bei dem Schlüssel Ihre benannten Konstanten darstellen und Werte die Literal-Strings oder -Zahlen sind.

            const userRoles = {
  Admin: "ADMIN",
  Editor: "EDITOR",
  Viewer: "VIEWER"
} as const;

type UserRole = typeof userRoles[keyof typeof userRoles];

let currentUserRole: UserRole = "EDITOR";
// currentUserRole = "GUEST"; // Fehler: Type '"GUEST"' is not assignable to type 'UserRole'.

function displayRole(role: UserRole) {
  console.log(`User role is: ${role}`);
}

displayRole(userRoles.Admin); // Valid
displayRole("EDITOR"); // Valid

            

              
                Copy
              
            
          

In diesem Objektbeispiel:

• as const: Diese Assertion macht das gesamte Objekt schreibgeschützt. Noch wichtiger ist, dass sie Literal-Typen für alle Eigenschaftswerte ableitet (z. B. "ADMIN" anstelle von string) und die Eigenschaften selbst schreibgeschützt macht.
• keyof typeof userRoles: Dieser Ausdruck führt zu einer Union der Schlüssel des userRoles-Objekts, nämlich "Admin" | "Editor" | "Viewer".
• typeof userRoles[keyof typeof userRoles]: Dies ist ein Lookup Type. Er verwendet die Union der Schlüssel, um die entsprechenden Werte im userRoles-Typ nachzuschlagen. Dies führt zur Union der Werte: "ADMIN" | "EDITOR" | "VIEWER", was unser gewünschter Typ für Rollen ist.

Die JavaScript-Ausgabe für userRoles ist ein einfaches JavaScript-Objekt:

            var userRoles = {
    Admin: "ADMIN",
    Editor: "EDITOR",
    Viewer: "VIEWER"
};

            

              
                Copy
              
            
          

Dies ist deutlich schlanker als ein typisches Enum.

Wann Const Assertions verwenden

• Schreibgeschützte Konstanten: Wenn Sie eine feste Menge von String- oder Zahlenliteralen benötigen, die sich zur Laufzeit nicht ändern sollen.
• Minimale JavaScript-Ausgabe: Wenn Sie sich Sorgen um die Bundle-Größe machen und die performanteste Laufzeitdarstellung für Ihre Konstanten wünschen.
• Objektähnliche Struktur: Wenn Sie die Lesbarkeit von Schlüssel-Wert-Paaren bevorzugen, ähnlich wie Sie Daten oder Konfigurationen strukturieren würden.
• String-basierte Mengen: Besonders nützlich zur Darstellung von Zuständen, Typen oder Kategorien, die am besten durch beschreibende Strings identifiziert werden.

Alternative 2: Union Types

Union Types ermöglichen es Ihnen, zu deklarieren, dass eine Variable einen Wert von einem von mehreren Typen enthalten kann. In Kombination mit Literal Types (String-, Zahlen-, boolesche Literale) bilden sie eine leistungsstarke Möglichkeit, eine Menge zulässiger Werte zu definieren, ohne dass eine explizite Konstantendeklaration für die Menge selbst erforderlich ist.

Union Types mit String-Literalen

Sie können direkt eine Union von String-Literalen definieren.

            type TrafficLightColor = "RED" | "YELLOW" | "GREEN";

let currentLight: TrafficLightColor = "YELLOW";
// currentLight = "BLUE"; // Fehler: Type '"BLUE"' is not assignable to type 'TrafficLightColor'.

function changeLight(color: TrafficLightColor) {
  console.log(`Changing light to: ${color}`);
}

changeLight("RED");
// changeLight("REDDY"); // Fehler

            

              
                Copy
              
            
          

Dies ist der direkteste und oft der prägnanteste Weg, um eine Menge zulässiger String-Werte zu definieren.

Union Types mit numerischen Literalen

In ähnlicher Weise können Sie numerische Literale verwenden.

            type HttpStatusCode = 200 | 400 | 404 | 500;

let responseCode: HttpStatusCode = 404;
// responseCode = 201; // Fehler: Type '201' is not assignable to type 'HttpStatusCode'.

function handleResponse(code: HttpStatusCode) {
  if (code === 200) {
    console.log("Success!");
  } else {
    console.log(`Error code: ${code}`);
  }
}

handleResponse(500);

            

              
                Copy
              
            
          

Wann Union Types verwenden

• Einfache, direkte Mengen: Wenn die Menge zulässiger Werte klein und übersichtlich ist und keine beschreibenden Schlüssel über die Werte selbst hinaus erfordert.
• Implizite Konstanten: Wenn Sie keine benannte Konstante für die Menge selbst benötigen, sondern die Literalwerte direkt verwenden möchten.
• Maximale Prägnanz: Für unkomplizierte Szenarien, in denen die Definition eines dedizierten Objekts oder Arrays wie eine Übertreibung erscheint.
• Funktionsparameter/Rückgabetypen: Hervorragend geeignet, um die genaue Menge akzeptabler String- oder Zahlen-Ein-/Ausgaben für Funktionen zu definieren.

Vergleich von Enums, Const Assertions und Union Types

Fassen wir die wichtigsten Unterschiede und Anwendungsfälle zusammen:

Laufzeitverhalten

• Enums: Generieren JavaScript-Objekte, potenziell mit Reverse Mappings.
• Const Assertions (Arrays/Objekte): Generieren einfache JavaScript-Arrays oder -Objekte. Die Typinformationen werden zur Laufzeit gelöscht, aber die Datenstruktur bleibt erhalten.
• Union Types (mit Literalen): Keine Laufzeitdarstellung für die Union selbst. Die Werte sind nur Literale. Die Typprüfung erfolgt rein zur Kompilierzeit.

Lesbarkeit und Ausdruckskraft

• Enums: Hohe Lesbarkeit, besonders mit beschreibenden Namen. Kann aber auch ausführlicher sein.
• Const Assertions (Objekte): Gute Lesbarkeit durch Schlüssel-Wert-Paare, die Konfigurationen oder Einstellungen imitieren.
• Const Assertions (Arrays): Weniger lesbar für die Darstellung benannter Konstanten, eher für eine geordnete Liste von Werten.
• Union Types: Sehr prägnant. Die Lesbarkeit hängt von der Klarheit der Literalwerte selbst ab.

Typsicherheit

• Alle drei Ansätze bieten eine hohe Typsicherheit. Sie stellen sicher, dass Variablen nur gültige, vordefinierte Werte zugewiesen oder an Funktionen übergeben werden können.

Bundle-Größe

• Enums: Im Allgemeinen am größten aufgrund generierter JavaScript-Objekte.
• Const Assertions: Kleiner als Enums, da sie einfache Datenstrukturen erzeugen.
• Union Types: Am kleinsten, da sie keine spezifische Laufzeitdatenstruktur für den Typ selbst erzeugen, sondern sich nur auf Literalwerte verlassen.

Use Cases Matrix

Hier ist eine kurze Übersicht:

Praktische Beispiele und Best Practices

Beispiel 1: Darstellung von API-Statuscodes

Enum:

            enum ApiStatus {
  Success = "SUCCESS",
  Error = "ERROR",
  Pending = "PENDING"
}

function handleApiResponse(status: ApiStatus) {
  // ... Logik ...
}

            

              
                Copy
              
            
          

Const Assertion (Objekt):

            
const apiStatusCodes = {
  SUCCESS: "SUCCESS",
  ERROR: "ERROR",
  PENDING: "PENDING"
} as const;

type ApiStatus = typeof apiStatusCodes[keyof typeof apiStatusCodes];

function handleApiResponse(status: ApiStatus) {
  // ... Logik ...
}

            

              
                Copy
              
            
          

Union Type:

            
type ApiStatus = "SUCCESS" | "ERROR" | "PENDING";

function handleApiResponse(status: ApiStatus) {
  // ... Logik ...
}

            

              
                Copy
              
            
          

Empfehlung: Für dieses Szenario ist ein Union Type oft am prägnantesten und effizientesten. Die Literalwerte selbst sind aussagekräftig genug. Wenn Sie jedem Status zusätzliche Metadaten zuordnen müssten (z. B. eine benutzerfreundliche Nachricht), wäre ein Const Assertion-Objekt die bessere Wahl.

Beispiel 2: Definieren von Benutzerrollen

Enum:

            
enum UserRoleEnum {
  Admin = "ADMIN",
  Moderator = "MODERATOR",
  User = "USER"
}

function getUserPermissions(role: UserRoleEnum) {
  // ... Logik ...
}

            

              
                Copy
              
            
          

Const Assertion (Objekt):

            
const userRolesObject = {
  Admin: "ADMIN",
  Moderator: "MODERATOR",
  User: "USER"
} as const;

type UserRole = typeof userRolesObject[keyof typeof userRolesObject];

function getUserPermissions(role: UserRole) {
  // ... Logik ...
}

            

              
                Copy
              
            
          

Union Type:

            
type UserRole = "ADMIN" | "MODERATOR" | "USER";

function getUserPermissions(role: UserRole) {
  // ... Logik ...
}

            

              
                Copy
              
            
          

Empfehlung: Ein Const Assertion-Objekt bietet hier ein gutes Gleichgewicht. Es bietet klare Schlüssel-Wert-Paare (z. B. userRolesObject.Admin), die die Lesbarkeit beim Referenzieren von Rollen verbessern können, während es dennoch performant ist. Ein Union Type ist ebenfalls ein sehr starker Kandidat, wenn direkte String-Literale ausreichend sind.

Beispiel 3: Darstellung von Konfigurationsoptionen

Stellen Sie sich ein Konfigurationsobjekt für eine globale Anwendung vor, das möglicherweise verschiedene Designs hat.

Enum:

            
enum Theme {
  Light = "light",
  Dark = "dark",
  System = "system"
}

interface AppConfig {
  theme: Theme;
  // ... andere Konfigurationsoptionen ...
}

            

              
                Copy
              
            
          

Const Assertion (Objekt):

            
const themes = {
  Light: "light",
  Dark: "dark",
  System: "system"
} as const;

type Theme = typeof themes[keyof typeof themes];

interface AppConfig {
  theme: Theme;
  // ... andere Konfigurationsoptionen ...
}

            

              
                Copy
              
            
          

Union Type:

            
type Theme = "light" | "dark" | "system";

interface AppConfig {
  theme: Theme;
  // ... andere Konfigurationsoptionen ...
}

            

              
                Copy
              
            
          

Empfehlung: Für Konfigurationseinstellungen wie Designs ist das Const Assertion-Objekt oft ideal. Es definiert klar die verfügbaren Optionen und ihre entsprechenden String-Werte. Die Schlüssel (Light, Dark, System) sind beschreibend und bilden die Werte direkt ab, wodurch der Konfigurationscode sehr verständlich wird.

Die richtige Lösung für die Aufgabe wählen

Die Entscheidung zwischen TypeScript-Enums, Const Assertions und Union Types ist nicht immer eindeutig. Es kommt oft zu einem Kompromiss zwischen Laufzeitleistung, Bundle-Größe und Code-Lesbarkeit/-Ausdruckskraft.

• Entscheiden Sie sich für Union Types, wenn Sie eine einfache, eingeschränkte Menge von String- oder Zahlenliteralen benötigen und maximale Prägnanz gewünscht ist. Sie eignen sich hervorragend für Funktionssignaturen und grundlegende Wertebeschränkungen.
• Entscheiden Sie sich für Const Assertions (mit Objekten), wenn Sie eine strukturiertere, lesbarere Möglichkeit wünschen, benannte Konstanten zu definieren, ähnlich wie ein Enum, aber mit deutlich weniger Laufzeit-Overhead. Dies ist ideal für Konfigurationen, Rollen oder jede Menge, bei der die Schlüssel eine erhebliche Bedeutung hinzufügen.
• Entscheiden Sie sich für Const Assertions (mit Arrays), wenn Sie einfach eine unveränderliche, geordnete Liste von Werten benötigen und der direkte Zugriff über den Index wichtiger ist als benannte Schlüssel.
• Ziehen Sie TypeScript Enums in Betracht, wenn Sie deren spezifische Funktionen benötigen, z. B. Reverse Mapping (obwohl dies in der modernen Entwicklung weniger üblich ist) oder wenn Ihr Team eine starke Präferenz hat und die Leistungsauswirkungen für Ihr Projekt vernachlässigbar sind.

In vielen modernen TypeScript-Projekten tendiert man eher zu Const Assertions und Union Types als zu traditionellen Enums, insbesondere für String-basierte Konstanten, da sie bessere Leistungseigenschaften und oft eine einfachere JavaScript-Ausgabe haben.

Globale Überlegungen

Bei der Entwicklung von Anwendungen für ein globales Publikum sind konsistente und vorhersehbare Konstantendefinitionen von entscheidender Bedeutung. Die von uns besprochenen Optionen (Enums, Const Assertions, Union Types) tragen alle zu dieser Konsistenz bei, indem sie die Typsicherheit in verschiedenen Umgebungen und Entwicklerlokalisierungen gewährleisten.

• Konsistenz: Unabhängig von der gewählten Methode ist Konsistenz innerhalb Ihres Projekts der Schlüssel. Wenn Sie sich entscheiden, Const Assertion-Objekte für Rollen zu verwenden, halten Sie sich in der gesamten Codebasis an dieses Muster.
• Internationalisierung (i18n): Verwenden Sie bei der Definition von Bezeichnungen oder Nachrichten, die internationalisiert werden sollen, diese typsicheren Strukturen, um sicherzustellen, dass nur gültige Schlüssel oder Bezeichner verwendet werden. Die tatsächlichen übersetzten Strings werden separat über i18n-Bibliotheken verwaltet. Wenn Sie beispielsweise ein status-Feld haben, das "PENDING", "PROCESSING", "COMPLETED" sein kann, ordnet Ihre i18n-Bibliothek diese internen Bezeichner lokalisierten Anzeigetexten zu.
• Zeitzonen & Währungen: Obwohl dies nicht direkt mit Enums zusammenhängt, sollten Sie bedenken, dass bei der Arbeit mit Werten wie Datumsangaben, Uhrzeiten oder Währungen das Typsystem von TypeScript helfen kann, die korrekte Verwendung zu erzwingen, aber für eine genaue globale Verarbeitung sind in der Regel externe Bibliotheken erforderlich. Beispielsweise könnte ein Currency-Union Type als "USD" | "EUR" | "GBP" definiert werden, aber die eigentliche Umrechnungslogik erfordert spezielle Tools.

Fazit

TypeScript bietet eine Vielzahl von Tools zur Verwaltung von Konstanten. Während Enums uns gute Dienste geleistet haben, bieten Const Assertions und Union Types überzeugende, oft performantere Alternativen. Indem Sie ihre Unterschiede verstehen und den richtigen Ansatz basierend auf Ihren spezifischen Bedürfnissen wählen - sei es Leistung, Lesbarkeit oder Prägnanz - können Sie robusteren, wartbareren und effizienteren TypeScript-Code schreiben, der global skaliert.

Die Verwendung dieser Alternativen kann zu kleineren Bundle-Größen, schnelleren Anwendungen und einer vorhersehbareren Entwicklererfahrung für Ihr internationales Team führen.